<template>
    <a-table
        :columns="columns"
        :data="dataList"
        :pagination="{
            showTotal: true,
            total,
            current: page.current,
            pageSize: page.pageSize,
        }"
        @page-change="pageChange"
    >
        <template #optional="{ record }">
            <a-space direction="vertical">
                <a-button type="primary" @click="doUpdate(record)"
                    >编辑</a-button
                >
                <a-button status="danger" @click="doDelete(record)"
                    >删除</a-button
                >
            </a-space>
        </template>
    </a-table>
</template>

<script setup lang="tsx">
import { onMounted, ref, watchEffect } from "vue";
import { Question, QuestionControllerService } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import {
    TableInstance,
    Tag,
    Space,
    Tooltip,
    Button,
    Row,
} from "@arco-design/web-vue";

const router = useRouter();

const show = ref(true);

const dataList = ref([]);
const total = ref(0);
const page = ref({
    pageSize: 10,
    current: 1,
});
//先执行page.value然后再执行...展开运算符
const pageChange = (num: number) => {
    page.value = {
        ...page.value,
        current: num,
    };
};
const doUpdate = (record: Question) => {
    router.push({
        path: "/update/question",
        query: { id: record.id },
    });
};
const doDelete = async (record: Question) => {
    const res = await QuestionControllerService.deleteQuestionUsingPost({
        id: record.id,
    });
    if (res.code === 0) {
        message.success("删除成功");
        loadData();
    } else {
        message.error("删除失败");
    }
};

const loadData = async () => {
    let res = await QuestionControllerService.listQuestionByPageUsingPost(
        page.value
    );
    console.log(res);
    if (res.code === 0) {
        dataList.value = res.data.records;
        total.value = res.data.total;
    } else {
        message.error("加载失败" + res.message);
    }
};
watchEffect(() => {
    loadData();
});
onMounted(() => {
    loadData();
});
const columns: TableInstance["$props"]["columns"] = [
    {
        title: "id",
        dataIndex: "id",
    },
    {
        title: "标题",
        dataIndex: "title",
    },
    {
        title: "内容",
        dataIndex: "content",
    },
    {
        title: "标签",
        dataIndex: "tags",
        render: ({ record }) => {
            const tags: string[] = JSON.parse(record["tags"]);
            return (
                <Space direction="vertical">
                    {tags.map((tag) => (
                        <Tag>{tag}</Tag>
                    ))}
                </Space>
            );
        },
    },
    {
        title: "答案",
        dataIndex: "answer",
    },
    {
        title: "提交数",
        dataIndex: "submitNum",
    },
    {
        title: "通过数",
        dataIndex: "acceptedNum",
    },
    {
        title: "判题配置",
        dataIndex: "judgeConfig",
        render: ({ record }) => {
            const judgeConfig: {
                timeLimit: number;
                memoryLimit: number;
                stackLimit: number;
            } | null = JSON.parse(record["judgeConfig"]);

            if (judgeConfig === null) return null;
            else
                return (
                    <Space
                        direction="vertical"
                        style={{
                            cursor: "pointer",
                        }}
                    >
                        <Tooltip content={`${judgeConfig.timeLimit}`}>
                            <Tag>时间限制</Tag>
                        </Tooltip>
                        <Tooltip content={`${judgeConfig.memoryLimit}`}>
                            <Tag>内存限制</Tag>
                        </Tooltip>
                        <Tooltip content={`${judgeConfig.stackLimit}`}>
                            <Tag>堆限制</Tag>
                        </Tooltip>
                    </Space>
                );
        },
    },
    {
        title: "判题用例",
        dataIndex: "judgeCase",
        render: ({ record }) => {
            const judgeCases: { input: string; output: string }[] | null =
                JSON.parse(record["judgeCase"]);

            return judgeCases === null ? null : (
                <Space
                    direction="vertical"
                    style={{
                        cursor: "pointer",
                    }}
                >
                    {judgeCases.map((judgeCase, index) => (
                        <Tooltip
                            content={`输入：${judgeCase.input}；输出：${judgeCase.output}`}
                        >
                            <Tag>{`用例${index + 1}`}</Tag>
                        </Tooltip>
                    ))}
                </Space>
            );
        },
    },
    {
        title: "用户id",
        dataIndex: "userId",
        render: ({ record }) => {
            const userId: string = record["userId"];
            return (
                <Tooltip content={userId}>
                    <Button>UserID</Button>
                </Tooltip>
            );
        },
    },
    {
        title: "创建时间",
        dataIndex: "createTime",
        render: ({ record }) => {
            const createTime = new Date(record["createTime"]);
            console.log(createTime);
            return `${createTime.getFullYear()}/${
                createTime.getMonth() + 1
            }/${createTime.getDay()}`;
        },
    },
    {
        title: "操作",
        slotName: "optional",
    },
];
</script>

<style scoped>
#manageQuestionView {
}
</style>
